@import "../lib/css/until";
$widthTop5:1315px;//top前5宽度
$heightTop5:700px;//top前5高度
$widthCyAll:1096px;//汇总宽度
$widthCySun:544px;//汇总子项宽度
$heightCySun:391px;//汇总子项高度
$imgW:1280px;//图片宽度
$imgH:700px;//图片高度
$pieW:1158px;//饼状图宽度
$pieH:660px;//饼状图高度
$institNumW:1157px;//各类机构数宽度
$instiTypeW:2347px;//类型分布宽度
$instiTypeH:700px;//类型分布高度
$hstopH:750px;//十大产业宽度
$hsjgNumW:1000px;//十大产业机构宽度
.moduleTit-box{
  height: $moduleTitH;
  text-align: center;
  line-height: $moduleTitH;
  color: $wordColor;
  font-size: 64px;
  img,span{
    display: inline-block;
    vertical-align: top;
  }
  img{
    width: 291px;
    &.rotateImg{
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
  }
  span{
    margin: 0 40px;
  }
}
.pg-one-content{
  width: 100%;
}
.pageOne{
  width:100%;
  height:100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 193px 200px 193px;
  @include positionFun(0,0);
}
.scatter-box{
  margin-top: 54px;
}
.topScatter-box{
  text-align: center;
  display: inline-block;
  vertical-align: top;
  .topScatter{
    @include linerBg();
    width: $widthTop5;
    height: $heightTop5;
  }
}
.institNum-box,.pie-box{
  display: inline-block;
  vertical-align: top;
}
.right-box{
  text-align: right;
  margin-top: -100px;
}
.jgNum-box{
  margin-left: 200px;
  vertical-align: top;
  width: $widthCyAll;
  display: inline-block;
  -webkit-transform: translateY(-0.27rem);
  transform: translateY(-0.27rem);
  li{
    background: url("../assets/img/span_bg.png") no-repeat;
    height: $heightCySun;
    width: $widthCySun;
    &:nth-child(odd){
      float: left;
    }
    &:nth-child(even){
      float: right;
    }
  }
  span{
    color: #fff;
    text-align: center;
    display: block;
    &:nth-child(1){
      font-size: 50px;
      height:128px;
      line-height: 128px;
    }
    &:nth-child(2){
      height: 165px;
      line-height: 165px;
      font-size: 89px;
    }
    &:nth-child(3){
      height: 62px;
    }
  }
}
.one-tit{
  height: $oneTitH;
  line-height: $oneTitH;
  width: $oneTitW;
  margin: 0 auto 50px;
  color: $wordColor;
  font-size: 140px;
  text-align: center;
  background: url("../assets/img/title.png") no-repeat;
}
.img-box{
  vertical-align: top;
  display: inline-block;
  width: $imgW;
}
.hsh-img{
  height: $imgH;
  width: 100%;
  background: url("../assets/img/hsh.jpg") no-repeat;
  border-radius: 20px;
}
.img-info{
  word-wrap:break-word;
  white-space:pre-wrap;
  width: 100%;
  margin-top:50px;
  color: $wordColor;
  font-size: 40px;
}
.pie-box{
  width: $pieW;
  .moduleTit-box img{
    width: 250px;
    margin-left: -21px;
  }
  .moduleTit-box span{
    margin:0 0 0 -20px;
  }
  .moduleTit-box{
    font-size: 60px;
  }
}
.institution-pie{
  @include linerBg();
  width: 100%;
  height: $pieH;
}
.institNum-box{
  width: $institNumW;
}
.institNum{
  width: 100%;
  height: $pieH;
  @include linerBg();
}
.instiType-box{
  width: $instiTypeW;
  margin-left: 486px;
  position: relative;
}
.type-btn-box{
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top:144px;
  a{
    display: inline-block;
    vertical-align: top;
    width: 268px;
    height: 80px;
    line-height: 80px;
    border-radius: 4px;
    background: rgba(0,91,159,0.6);
    border: 1px solid #6efeff;
    //background: url("../assets/img/tab_click.png") no-repeat;
    //background-size: 100% 100%;
    font-size: 30px;
    color: $wordColor;
    text-align: center;
    &.Afocus{
      border: 1px solid #1a7bc0;
      background: linear-gradient(to bottom,#2d86c3, #004588);
    }
  }
}
.instiType{
  padding-top: 100px;
  width: $instiTypeW;
  height: $instiTypeH;
  display: inline-block;
  @include linerBg();
}
.hs-top-tit{
  width: 2346px;
  margin-left: 490px;
  margin-top: -50px;
}
.hs-top10{
  margin-left: 490px;
  height: $hstopH;
  width: 2346px;
  @include linerBg();
  text-align: center;
}
.topInstit,.topBusiness{
  display: inline-block;
  height: 100%;
  width: 49%;
  vertical-align: top;
}
//地图
.map-box{
  position: absolute;
  z-index: 10;
  width: 2100px;
  height: 2500px;
  background: url("../assets/img/map3.png") no-repeat 222px 337px;
  top:454px;
  left:2808px;
  .jizou,.gucheng{
    color:#b4f9ff;
    font-size: 50px;
    position: absolute;
    left: 550px;
    top:1518px;
    z-index: 30;
  }
  .gucheng{
    left: 1200px;
    top:1768px;
  }
  .hoverCity{
    color:#974d21
  }
  .madel-box{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    z-index: 60;
    background-color: transparent;
  }
  .jigou-btn-box{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    padding: 40px;
    bottom:0;
    right: -106px;
    z-index: 30;
    width: 462px;
    height: 749px;
    background: url("../assets/img/jigoubtn0bg.png") no-repeat;
    .jigou-btn{
      padding-top: 20px;
      height: 33.33%;
      position: relative;
      .guang{
        position: absolute;
        bottom: -70px;
        left: 0;
      }
    }
    p{
      font-size: 50px;
      text-align: center;
      background-image: -webkit-linear-gradient(bottom, #da9000, #fffc00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .right-num{
      font-size: 66px;
      .home{
        font-size: 46px;
        margin-left: 20px;
      }
    }
  }
  .map1,.map2,.map3{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .map1{
    width: 2100px;
    height: 2600px;
    left: 52px;
    top:-32px;
  }
  .map2{
    width: 2100px;
    height: 2700px;
    left: 18px;
    top:-77px;
    z-index: 11;
  }
  .map3{
    width: 2100px;
    height: 2650px;
    left: 69px;
    top:25px;
    z-index: 12;
  }
  .map-name{
    -webkit-transform: translate(60px,160px);
    transform: translate(60px,160px);
  }
  .btn-groupd{
    position: absolute;
    z-index: 70;
    right: -100px;
    top:300px;
    a{
      display: inline-block;
      vertical-align: top;
      font-size: 28px;
      border-radius: 4px;
      width: 303px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: $wordColor;
      font-weight: 700;
      background: rgba(0,91,159,0.6);
      border: 1px solid #6efeff;
      p{
        line-height: 28px;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        &:nth-child(2){
          margin-top: 5px;
        }
      }
      &:focus{
        border: 1px solid #1a7bc0;
        background: linear-gradient(to bottom, #2d86c3, #004588);
      }
    }
  }
  .map-alert{
    display: block;
    position: absolute;
    z-index: 20;
    width:426px;
    height: 241px;
    background: url("../assets/img/map_alert.png") no-repeat;
    color: $wordColor;
    font-size: 24px;
    text-align: center;
    padding-top: 55px;
    img{
      width: 90px;
      position: absolute;
      z-index: 99;
      left:44px;
      top:-24px;
    }
    p{
      height: 40px;
      line-height: 40px;
      margin-top: 15px;
      .jgNum-span{
        color: #eaa739;
      }
      &:nth-child(1){
        margin-top: 0;
      }
      span{
        display: inline-block;
        &:nth-child(1){
          width: 90px;
          text-align: right;
        }
        &:nth-child(2){
          width: 120px;
          text-align: right;
        }
      }
    }
  }
  .alert-box{
    height: 0;
  }
  .map-alert1{
    @include setPosition(290px,130px)
  }
  .map-alert2{
    @include setPosition(620px,180px)
  }
  .map-alert3{
    @include setPosition(427px,564px)
  }
  .map-alert4{
    @include setPosition(868px,428px)
  }
  .map-alert5{
    @include setPosition(820px,730px)
  }
  .map-alert6{
    @include setPosition(1280px,600px)
  }
  .map-alert7{
    @include setPosition(537px,930px)
  }
  .map-alert8{
    @include setPosition(1096px,998px)
  }
  .map-alert9{
    @include setPosition(318px,1129px)
  }
  .map-alert10{
    @include setPosition(657px,1285px)
  }
  .map-alert11{
    @include setPosition(980px,1354px)
  }
  .newCreate-box{
    text-align: center;
    width: 2234px;
    height: 647px;
    position:absolute;
    z-index: 20;
    background: url("../assets/img/map_alertbg.png") no-repeat;
    padding-top: 150px;
    @include setPosition(0px,600px)
  }
  .xzjgStyle{
    display: inline-block;
    width: 800px;
    height: 500px;
    margin-left: 100px;
    vertical-align: top;
    &:nth-child(1){
      margin-left: 0;
    }
  }
}
.table-box{
  position: absolute;
  display: none;
  top:725px;
  left: 2880px;
  width: 2148px;
  z-index: 100;
  //border: 1px solid #83c7f3;
  span{
    display: inline-block;
    vertical-align: top;
    height: 100%;
    line-height: 126px;
    text-align: center;
    &:nth-child(1){
      width: 105px;
    }
    &:nth-child(2){
      width: 590px;
    }
    &:nth-child(3){
      width: 453px;
    }
    &:nth-child(4){
      width: 195px;
    }
    &:nth-child(5){
      width: 735px;
    }
  }
}
.table-tit{
  height: 126px;
  background: linear-gradient(to bottom, rgba(3,35,89,0.9),rgba(3,69,123,0.9));
  width: 100%;
  line-height: 126px;
  color:$wordColor;
  font-size: 34px;
  border: 1px solid #83c7f3;
  span:nth-child(1){
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
.tb-list-box{
  //border-left: 11px solid #00a1ea;
  //border-right: 11px solid #00a1ea;
  //border-bottom: 8px solid #00a1ea;
  li{
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 35px;
    color: #7de5ff;
    width: 100%;
    border-left:1px solid #83c7f3;
    border-right:1px solid #83c7f3;
    background-color: rgba(10,65,106,0.9);
    span{
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 88px;
      line-height: 88px;
      &:nth-child(2),&:nth-child(4){
        border-left: 1px solid #83c7f3;
        border-right: 1px solid #83c7f3;
      }
    }
    &:last-child{
      border-bottom: 1px solid #83c7f3;
    }
    &:nth-child(even){
      background-color: rgba(21,93,135,0.9);
    }
  }
}
.close-table{
  position: absolute;
  top:0;
  right: 10px;
  display: block;
  img{
    width: 92px;
  }
}
.table-ft{
  padding-top: 19px;
  padding-bottom: 19px;
  font-size: 35px;
  color: #01f5f1;
  background-color: rgba(21,93,135,0.9);
  .left-btn,.right-btn{
    margin-left: 900px;
    vertical-align: top;
    display: inline-block;
    height: 59px;
    img{
      width: 59px;
      display: block;
    }
  }
  .right-btn{
    margin-left: 0;
  }
  i{
    display: inline-block;
    vertical-align: top;
    height: 59px;
    text-align: center;
    line-height: 59px;
    width: 120px;
    color: $wordColor;
    font-style: normal;
  }
  strong{
    display: inline-block;
    vertical-align: top;
    height: 59px;
    line-height: 59px;
    color: #01f5f1;
    font-weight: normal;
    margin-left: 340px;
    &.all-page{
      margin-left: 40px;
    }
  }
}
